<template>
	<view class="body">
		<xk-header title="有偿服务修改"></xk-header>
		<view class="util-bar">
			<view class="estate-box">
			<view class="danhao">事项编码：{{infodate.apply_no}}</view>
			<u--form
			
			>
				<u-form-item
					label="服务期限*:"
					prop="service_term"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u--input v-model="infodate.service_term" placeholder="请输入服务期限" border="none"></u--input>
				</u-form-item>

				<!-- <u-form-item
					label="备注:"
					prop="remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u--input v-model="infodate.remark" placeholder="请输入备注" border="none"></u--input>
				</u-form-item> -->
				<u-form-item
					label="服务事项*:"
					prop="content_id"
					borderBottom
					ref="content_id"
					labelWidth="120"
				>
				<!-- {{fuwuname?fuwuname:infodate.matters_name}} -->
				<view style="margin-top: 15px;width: 485px;color:#2c72ff;" @click="openfuwu" v-model="infodate.matters_name">{{fuwuname?fuwuname:infodate.matters_name}}<u-icon style="display: inline-flex;" :labelPos="right" top="-17px" name="arrow-right"></u-icon></view>
				</u-form-item>
				
				<!-- <u-form-item
					label="物业信息:"
					prop="property_id"
					borderBottom1
					ref="property_id"
					labelWidth="120"
				>
				<view style="margin-top: 15px;width: 500px;color:#2c72ff;" @click="openwuye" v-model="infodate.building">{{wuyename?wuyename:'楼栋:'+infodate.building}} <u-icon style="display: inline-flex;" :labelPos="right" top="-17px" name="arrow-right"></u-icon></view>
				</u-form-item> -->
				
				<u-form-item
					label="物业信息*:"
					prop="property_id"
					borderBottom
					ref="property_id"
					labelWidth="120"
				>
				<view @click="gowuye" :data-id="infodate.paid_id" class="list-item">
					<view v-if="myuwyeinfo!=''" class="right-title1" style="color: #2C72FF;margin-top: 15px;width: 485px;">{{repair_Address}}<u-icon style="display: inline-flex;" :labelPos="right" top="-17px" name="arrow-right"></u-icon></view>
					<view v-else class="right-title1" style="color: #2C72FF;margin-top: 15px;width: 485px;">{{'楼栋:'+infodate.building+'__'+'楼层:'+infodate.storey}}<u-icon style="display: inline-flex;" :labelPos="right" top="-17px" name="arrow-right"></u-icon></view>
				</view>
				</u-form-item>
				<u-form-item
					label="备注:"
					prop="remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u--input v-model="infodate.remark" placeholder="请输入备注" border="none"></u--input>
				</u-form-item>
			</u--form>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn" @click="doneSubmit">保存提交</view>
			<!-- <view class="common-btn btn" @click="doneupdate">保存修改</view> -->
		</view>
		<view style="height:100px;"></view>
		<u-popup
		:show="showwuye"
		:round="8"
		closeable
		@close="showwuye=false"
		customStyle="height:60%"
		>
			<view class="wy-title">物业信息列表</view>
			<view class="wybox">
				<!-- <view class="search-box"> -->
					<!-- <u-search shape="square" placeholder="登录号/司机名称/驾驶证等级" height="35" :showAction="false" v-model="wuyeList.searchKey" @search="searchHandle"></u-search> -->
				<!-- </view> -->
				<view style="padding:15px 0px 15px 0px;">
				<u-radio-group v-model="wuyeList.property_id" placement="column">
					<u-radio shape="square" v-for="(item, index) in wuyeList.data" :key="index" 
					:name="index" 
					:customStyle="{marginBottom: '8px'}"
					active-color="#25afa2" 
					:label="item.property_code+'_('+item.property_type_name+')_'+'(楼栋:'+item.building+')'+'_(楼层:' +item.storey+')'"
					style="margin-bottom:10px;"
					></u-radio>
				</u-radio-group>
				</view> 
				<!-- <view class="btn-dengji"><u-button type="primary" shape="circle" text="确定" @click="confirmwuye"></u-button></view> -->
			</view>
			<view class="btn-dengji" style="margin: 10px 20px;"><u-button type="primary" shape="circle" text="确定" @click="confirmwuye"></u-button></view>
		</u-popup>
		
		<u-popup
		:show="showfuwu"
		:round="8"
		closeable
		@close="showfuwu=false"
		customStyle="height:60%"
		>
			<view class="wy-title">有偿服务内容启用列表</view>
			<scroll-view scroll-y="true" class="scroll-Y">
			<view class="wybox">
				<view class="search-box">
					<u-search shape="square" placeholder="事项编码/服务事项名称/楼栋" height="35" :showAction="false" v-model="fuwuList.searchKey" @search="searchHandlecl"></u-search>
				</view>
				<view style="padding:15px 0px 15px 0px;">
				<u-radio-group v-model="fuwuList.content_id" placement="column">
					<u-radio shape="square" v-for="(item, index) in fuwuList.data" :key="index" 
					:name="index" 
					:customStyle="{marginBottom: '12px'}"
					active-color="#25afa2" 
					:label="item.content_no+'_('+item.matters_name+')_'+'('+item.building+')'"
					style="margin-bottom:10px;"
					></u-radio>
				</u-radio-group>
				</view>
				<!-- <view class="btn-dengji"><u-button type="primary" shape="circle" text="确定" @click="confirmfuwu"></u-button></view> -->
			</view>
			<view class="btn-dengji" style="margin: 10px 20px;"><u-button type="primary" shape="circle" text="确定" @click="confirmfuwu"></u-button></view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showfuwu:false,
				fuwuname:'',
				showwuye:false,
				wuyename:'',
				property_id:'',
				myuwyeinfo:[],
				wuyeinfo:'',
				content_id:'',
				service_term:'',
				repair_Address:'',
				remark:'',
				conid:'',
				paid_id:'',
				infodate:[],
				Tshow:false,
				apply_end_time:Number(new Date()),
				formdata:{
					"service_term": "",
					"remark": "",
					// "content_id": "",
					// "property_id": "",
					"isSubmit": false
				},
				rules: {
					'apply_user_name': {
						type: 'string',
						required:true,
						message: '请填写联系人',
						trigger:['blur','change']
					},
					'apply_dept_name': {
						type: 'string',
						required:true,
						message: '请填写申请人单位',
						trigger:['blur','change']
					},
					'apply_phone': {
						type: 'string',
						required:true,
						message: '请填写电话号码',
						trigger:['blur','change']
					},
					'caution_money': {
						type: 'string',
						required:true,
						message: '请填写保证金',
						trigger:['blur','change']
					},
				},
				fuwuList:{
					content_id:0,
					searchKey:'',
					startNum: 0,
					isAll: false,
					data: []
				},
				wuyeList:{
					property_id:0,
					searchKey:'',
					startNum: 0,
					isAll: false,
					data: []
				},
			}
		},
		onLoad(opts){
			console.log('opts',opts)
			this.paid_id=opts.paid_id
			// console.log('this.paid_id',this.paid_id)
			// if(this.infodate.content_id==null){
			// 	this.paid_id=opts.paid_id
			// 	console.log('this.paid_id',this.paid_id)
				
			// }else{
			// 	this.paid_id=opts.paid_id
			// 	console.log('this.paid_id10',this.paid_id)
			// 	this.wuyeinfo = JSON.parse(opts.wuyeinfo)
			// 	console.log('this.wuyeinfo',this.wuyeinfo)
			// }
			// this.wuyeinfo = JSON.parse(opts.wuyeinfo) 
			// console.log('this.wuyeinfo',this.wuyeinfo)
			
			this.getDate(true);
		},
		onShow(){

		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		methods: {
			gowuye(e){
				uni.$off('getBuildInfo')
				uni.$on('getBuildInfo', (res)=>{
					console.log('222=2===',res)
					this.property_id = res.property_id;
					this.myuwyeinfo=res;
					this.infodate.property_id=res.property_id;
					console.log('this.infodate.property_id',this.infodate.property_id)
					this.repair_Address = '楼栋:'+res.building +'__'+'楼层:'+ res.storey
				
				});
				let id=e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pagesA/paid-service/wuye-info?paid_id='+id
				})
			},
			//服务信息列表
			async getDate() {
				this.$api.mySelf_psPaidService_getPsPaid(this.paid_id).then((res)=>{
					console.log(res)
					this.infodate=res.task;
					console.log('this.infodate',this.infodate)
				});
			},
		
			openfuwu(){
				this.showfuwu=true;
				this.queryListInfocl(true);
			},
			openwuye(){
				this.showwuye=true;
				this.queryListInfo(true);
			},
			searchHandle(){
				this.wuyeList.startNum=0;
				this.wuyeList.isAll=false;
				this.queryListInfo(true)
			},
			searchHandlecl(){
				this.fuwuList.startNum=0;
				this.fuwuList.isAll=false;
				this.queryListInfocl(true)
			},
			
			confirmwuye(){
				console.log(this.wuyeList.data[this.wuyeList.property_id])
				var getname=this.wuyeList.data[this.wuyeList.property_id];
				this.showwuye=false
				// this.wuyename=getname.property_code+"("+'名称:'+getname.property_type_name+','+'楼栋：'+getname.building+")";
				this.wuyename="("+'楼栋:'+getname.building+','+'楼层：'+getname.storey+")";
				this.property_id=getname.property_id
				this.infodate.property_id=getname.property_id
				console.log('this.infodate.property_id',this.infodate.property_id)
				console.log('this.property_id',this.property_id)
			},
			confirmfuwu(){
				console.log('this.fuwuList.data[this.fuwuList.content_id]',this.fuwuList.data[this.fuwuList.content_id])
				var getname=this.fuwuList.data[this.fuwuList.content_id];
				this.showfuwu=false
				this.fuwuname=getname.content_no+"("+getname.matters_name+")";
				this.content_id=getname.content_id
				this.infodate.content_id=getname.content_id
				console.log('this.infodate.content_id',this.infodate.content_id)
				console.log('this.content_id',this.content_id)
			},
			confirmT(e){
				console.log(e)
				this.formdata.apply_end_time=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.Tshow=false
			},
			cancelT(){
				this.Tshow=false
			},
			cancelDate(){
				this.showDate=false;
			},
			doneSubmit(){
				// if(!this.service_term){
				// 	this.$util.toast('请输入服务期限')
				// 	return
				// }
				// if(!this.property_id){
				// 	this.$util.toast('请选择楼栋')
				// 	return
				// }
				// this.$refs.uviewForm.validate().then(res => {
					//uni.$u.toast('校验通过')
					// console.log(this.formdata)
					this.$util.confirm({
						content: "确定提交",
						confirmText: "确定"
					}).then(isConfirm => {
						if (isConfirm) {
							this.$util.post({
								url: "app/psPaidService/applyUpdate",
								data: {
									paid_id:this.infodate.paid_id,
									service_term:this.infodate.service_term,
									remark:this.infodate.remark,
									content_id:this.infodate.content_id,
									property_id:this.infodate.property_id,
									isSubmit:true
								}
							}).then(res => {
								// uni.navigateBack()
								uni.redirectTo({
									url:'/pagesA/paid-service/paid-service-list'
								})
							})
						}
					})
				//}).catch(errors => {
				// 	uni.$u.toast('请输入必填项')
				// })
			},
			doneupdate(){
				// if(!this.content_id){
				// 	this.$util.toast('请选择服务事项')
				// 	return
				// }
				// if(!this.property_id){
				// 	this.$util.toast('请选择楼栋')
				// 	return
				// }
				// this.$refs.uviewForm.validate().then(res => {
					//uni.$u.toast('校验通过')
					// console.log(this.formdata)
					console.log('服务',this.content_id)
					console.log('物业',this.property_id)
					this.$util.confirm({
						content: "确定提交修改？",
						confirmText: "确定"
					}).then(isConfirm => {
						if (isConfirm) {
							this.$util.post({
								url: "app/psPaidService/applyUpdate",
								data: {
									paid_id:this.infodate.paid_id,
									service_term:this.infodate.service_term,
									remark:this.infodate.remark,
									content_id:this.infodate.content_id,
									property_id:this.infodate.property_id,
									// content_id:this.content_id,
									// property_id:this.property_id,
									isSubmit:false
								}
							}).then(res => {
								// uni.navigateBack()
								uni.redirectTo({
									url:'/pagesA/paid-service/paid-service-list'
								})
							})
						}
					})
				//}).catch(errors => {
				// 	uni.$u.toast('请输入必填项')
				// })
			},
			//事项编码信息列表
			async queryListInfocl(flag) {
				console.log('queryListInfo',this.fuwuList)
				let startNum = this.fuwuList.startNum;
				if(flag === true && startNum != 0) {
					return;
				}
				if(this.fuwuList.isAll) {
					return; // 加载完成
				}
			
				var statusName='ENABLE';
			
				//初始化查询条件
				let pageSize=15;//翻页：每页多少条记录
				let params = {
					start:startNum,
					limit:pageSize
				}
				//搜索“单号/经办人/申请人单位”关键词
				if(this.fuwuList.searchKey){
					params.searchKey = this.fuwuList.searchKey
				}
				let res=[];
				this.isloading=true
				this.loadmoreStatus='loading'
				res = await this.$api.mySelf_psPaidContent_getPaidContentList(params,statusName)
				res = res.ENABLE;
				//返回数据，赋值到对应选项内容列表
				if(res.length == 0 && this.fuwuList.data.length == 0){
					this.isloading=false;
					this.loadmoreStatus='nomore';
					this.stopRefresh();
					return
				}
				console.log('res',res)
				//默认20条记录为一页
				if(res.length < pageSize){
					this.fuwuList.isAll = true
				}
				if(this.fuwuList.startNum == 0){
					this.fuwuList.data = res
				}else{
					this.fuwuList.data = this.fuwuList.data.concat(res)
				}
				this.fuwuList.startNum += pageSize
				this.isloading=false
				this.loadmoreStatus='nomore'
			},
			//物业信息列表
			async queryListInfo(flag) {
				console.log('this.wuyeList',this.wuyeList)
				let startNum = this.wuyeList.startNum;
				if(flag === true && startNum != 0) {
					return;
				}
				if(this.wuyeList.isAll) {
					return; // 加载完成
				}
			
				// var statusName='CAN_RESERVE';

				//初始化查询条件
				let pageSize=40;//翻页：每页多少条记录
				let params = {
					start:startNum,
					limit:pageSize
				}
				//搜索“单号/经办人/申请人单位”关键词
				if(this.wuyeList.searchKey){
					params.searchKey = this.wuyeList.searchKey
				}
				let res=[];
				this.isloading=true
				this.loadmoreStatus='loading'
				res = await this.$api.assets_getAssetsProperty(params)
				console.log('res---->',res)
				// res = res.CAN_RESERVE;
				//返回数据，赋值到对应选项内容列表
				if(res.length == 0 && this.wuyeList.data.length == 0){
					this.isloading=false;
					this.loadmoreStatus='nomore';
					this.stopRefresh();
					return
				}
				console.log('res',res)
				//默认20条记录为一页
				if(res.length < pageSize){
					this.wuyeList.isAll = true
				}
				if(this.wuyeList.startNum == 0){
					this.wuyeList.data = res
				}else{
					this.wuyeList.data = this.wuyeList.data.concat(res)
				}
				this.wuyeList.startNum += pageSize
				this.isloading=false
				this.loadmoreStatus='nomore'
			}
		}
	}
</script>

<style lang="scss" scoped>
// .right-title1{
// 	float: right;
// 	margin-right: 200px;
// 	margin-bottom: 20px;
// }
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 30px 10px;
	margin:10px;
	border-radius:6px;
}
.grey-t{
	color:#CCCCCC;
}
.loadText{
	padding:5px 0px 20px 0px;
}
.danhao{
	font-size:18px;
	padding:10px 0px 10px 0;
	font-weight:bold;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	height: 300px;
	overflow-y: auto;
	margin:15px;
	font-size:28rpx;
	border-radius:8px;
}
</style>
